<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入vue -->
    <script type="application/javascript" src="../js/vue.js"></script>
    <!-- 引入elementUI -->
    <script type="application/javascript" src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="app">

    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">

            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="地址"
                    width="300">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="400">
                <template slot-scope="scope">

                    <el-button type="primary" @click="update(scope.row)" round>编辑</el-button>
                    <el-button type="success" @click="del(scope.row)" round>删除</el-button>

                </template>
            </el-table-column>

        </el-table>
    </div>

</div>
<script>
    let app = new Vue({
        el:"#app",
        data(){
            return{
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods:{
            fun01(){

            },
            update(row){
                console.log("当前行的数据为：",row)
                alert("调用修改方法")
            },
            del(){
                alert("调用删除方法")
            }
        },
    })
</script>
</body>
</html>